<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
</head>
<body>
    <div class="layui-form timo-compile">
    <form th:action="@{/member/agent/save}">
        <input type="hidden" name="id" th:if="${memberInfo}" th:value="${memberInfo.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">用户</label>
            <div class="layui-input-inline">
                <input class="layui-input" id="content1" type="text" name="nickname" autocomplete="off" placeholder="请输入昵称" th:value="${memberInfo?.nickname}">
                <input class="layui-input" id="userId" type="hidden" name="memberId">
            
            </div>
        </div>
        <div class="layui-form-item" id="area-picker">
            <div class="layui-form-label">代理区域</div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="province" class="province-selector" data-value="广东省" data-code="100010" lay-filter="province-1">
                    <option value="">请选择省</option>
                </select>
            </div>
            
            <div class="layui-input-inline" style="width: 200px;">
                <select name="city" class="city-selector" data-value="深圳市" data-code="100010" lay-filter="city-1">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="county" class="county-selector" data-value="龙岗区" data-code="100010" lay-filter="county-1">
                    <option value="">请选择区</option>
                </select>
            </div>
        </div>
        
        <div class="layui-form-item timo-finally">
            <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i>绑定</button>
        </div>
    </form>
</div>
<script th:replace="/common/template :: script"></script>
 <script>
      //配置插件目录
      //一般直接写在一个js文件中
      layui.use(['layer', 'form', 'layarea'], function () {
          var layer = layui.layer
              , form = layui.form
              , layarea = layui.layarea;

          layarea.render({
              elem: '#area-picker',
              change: function (res) {
                  //选择结果
                  console.log(res);
              }
          });
      });
      
      layui.config({
  	base: '/lib/autocomplete/'  // 自己autocomplete文件路径
  	, version: false,
  	debug: false,
});
 
layui.use(['jquery', 'autocomplete'], function () {
    var $ = layui.jquery,
        autocomplete = layui.autocomplete;
	    autocomplete.render({
	        elem: $('#content1'),
	        //cache: true,
	        url: '/member/memberInfo/search',
	      //  url: '/data.json',
	        response: {code: 'code', data: 'data'},
	        template_val: '{{d.nickname}}',
	        template_txt: '<span style="line-height: 30px;padding-left: 10px;">{{d.nickname}} <span class=\'layui-badge layui-bg-gray\' style="margin-left: 5px;">{{d.mobile}}</span></span>',
	        onselect: function (resp) {
        		$('#userId').attr("value","");
	            $('#content1').val(resp.nickname);
        		$('#userId').val(resp.id);
        		$('.layui-form-autocomplete').remove();
	    	}
    })
});
    </script>
    
</body>
</html>